<template>
    <div class="switch-container">
        <el-icon @click="prevChild" :size="10" :color="message.prevSibling?'#333':'#999'">
            <ArrowLeftBold />
        </el-icon>
        <span class="num">{{ message.siblingIndex + 1 }} / {{ message.siblingCount }}</span>
        <el-icon @click="nextChild" :size="10" :color="message.nextSibling?'#333':'#999' ">
            <ArrowRightBold />
        </el-icon>
    </div>
</template>
<script setup>
const emit = defineEmits(['switch'])
const props = defineProps({
    message: {
        type: Object,
        required: true,
        default: () => ({})
    }
})
const prevChild = () => {
    if (props.message.prevSibling) {
        emit('switch', props.message.prevSibling)
    }
}
const nextChild = () => {
    if (props.message.nextSibling) {
        emit('switch', props.message.nextSibling)
    }
}
</script>
<style scoped lang="scss">
.switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    cursor: pointer;

    el-icon {
        margin: 0 8px;
        transition: color 0.2s;

        &:hover:not(:disabled) {
            color: #409eff;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    .num {
        display: inline-block;
        margin: 0 8px;
        font-size: 14px;
    }
}
</style>